<template>
  <div>
    <!-- 海报开始 -->
    <div
      class="floating-image-containers"
      v-if="isVisible"
      @click="handleOutsideClick"
    >
      <img
        src="../../assets/img/微信图片_20240910125859.jpg"
        alt=""
        :class="{ 'image-zoomed': isZoomed }"
        @click="toggleZoom"
      />
      <button @click="close" class="close-button"></button>
    </div>
    <!-- 海报结束 -->
    <!-- 省赛开始 -->
    <div class="races">
      <el-timeline>
        <dev v-for="(race, index) in races" :key="index">
          <dev class="title">{{ race.title }}</dev>
          <el-timeline-item
            class="item"
            v-for="(activity, index) in race.activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            <div id="content">{{ activity.content }}</div>
            <div>
              <span>热门:</span
              ><el-rate
                class="rate"
                v-model="activity.hot"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
              <span>难度:</span
              ><el-rate
                class="rate"
                v-model="activity.difficulty"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
              <a :href="activity.connect" Target="_blank">去官网看看</a>
            </div>
          </el-timeline-item>
        </dev>
      </el-timeline>
    </div>
    <!-- 省赛结束 -->
    <!--这里是悬浮框的内容-->
    <div class="floating-box">
      <h3>第二课堂热门校赛</h3>
      <ul class="no-markers">
        <li>web应用与开发大赛</li>
        <li>Java程序设计竞赛</li>
        <li>软件作品赛</li>
        <li>算法设计竞赛</li>
        <li>网站框架应用开发竞赛</li>
        <li>软件测试大赛</li>
        <li>微信小程序应用开发竞赛</li>
        <li>程序设计竞赛</li>
        <li>数据库设计竞赛训练</li>
        <li>蓝桥杯大赛校内选拔赛</li>
        <li>移动互联应用开发竞赛</li>
        <li>python软件作品竞赛</li>
        <li>数据可视化竞赛</li>
        <li>......</li>
        <li></li>
      </ul>
      <div id="footer">快快加入我们吧，带你拿奖!</div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "../../components/SvgIcon.vue";
export default {
  components: { SvgIcon },
  data() {
    return {
      isVisible: false,
      isZoomed: false,
      races: [
        {
          title: "热门比赛/考试",
          activities: [
            {
              content:
                "“挑战杯”全国大学生课外学术科技作品竞赛（又称挑战杯，“大挑”）",
              connect: "https://www.tiaozhanbei.net/",
              timestamp: "3-5月份(2年一届-奇数年举办)",
              color: "#0bbd87",
              hot: 5,
              difficulty: 5,
            },

            {
              content:
                "“挑战杯”中国大学生创业计划大赛（暨“创青春”全国大学生创业大赛，又称小挑）",
              connect:
                "https://account.chsi.com.cn/passport/login?service=https://cy.ncss.cn/connect/chsi&locale=zh_CN",
              timestamp: "3-5月(2年一届-偶数年举办)",
              color: "#0bbd87",
              hot: 5,
              difficulty: 5,
            },

            {
              content: "蓝桥杯",
              timestamp: "4-6月份",
              color: "#0bbd87",
              connect: "https://dasai.lanqiao.cn/",
              hot: 5,
              difficulty: 3.7,
            },
            {
              content: "海峡两岸暨港澳地区大学生计算机创新作品赛广东省赛",
              timestamp: "6月份",
              color: "#0bbd87",
              connect: "https://fzs.newoe.cn/",
              hot: 5,
              difficulty: 3.7,
            },
            {
              content: "“互联网+”大学生创新创业大赛",
              connect:
                "https://account.chsi.com.cn/passport/login?service=https://cy.ncss.cn/connect/chsi&locale=zh_CN",
              timestamp: "6-9月份",
              color: "#0bbd87",
              hot: 5,
              difficulty: 4,
            },
            {
              content: "中国大学生计算机设计大赛",
              timestamp: "7-8月份",
              color: "#0bbd87",
              connect: "https://www.patest.cn/home",
              hot: 5,
              difficulty: 3.7,
            },
            {
              content: "四六级考试",
              timestamp: "6月、12月",
              color: "#0bbd87",
              connect: "https://cet.neea.edu.cn/",
              hot: 5,
              difficulty: 3.7,
            },
            {
              content: "全国大学生软件测试大赛",
              timestamp: "10-12月份",
              color: "#0bbd87",
              connect:
                "https://chinasoft.ccf.org.cn/2023/notice/ruanjianceshi.html",
              hot: 5,
              difficulty: 3.7,
            },
            {
              content: "PAT（计算机程序设计能力考试）",
              timestamp: "12月15日",
              color: "#0bbd87",
              connect: "https://www.patest.cn/home",
              hot: 5,
              difficulty: 3.7,
            },
          ],
        },
      ],
    };
  },
  methods: {
    close() {
      this.isVisible = false;
    },
    toggleZoom() {
      this.isZoomed = !this.isZoomed;
      if (this.isZoomed) {
        document.body.style.overflow = "hidden"; // 防止滚动
        document.addEventListener("click", this.handleOutsideClick);
      } else {
        document.body.style.overflow = "auto"; // 恢复滚动
        document.removeEventListener("click", this.handleOutsideClick);
      }
    },
    handleOutsideClick(event) {
      if (!this.$el.contains(event.target) && this.isZoomed) {
        this.isZoomed = false;
        document.body.style.overflow = "auto"; // 恢复滚动
      }
    },
  },
};
</script>

<style scoped>
.races {
  margin: 0 500px 30px 200px;
  padding-top: 40px;
  background: linear-gradient(
    to right,
    rgba(80, 255, 246, 0.305),
    rgba(255, 192, 203, 0.264),
    rgb(255, 255, 255)
  );
}
.el-timeline {
  margin-left: 222px;
}
.title {
  position: relative;
  top: 15px;
  left: -225px;
  font-size: 32px;
}

#content {
  font-size: 22px;
  margin-bottom: 20px;
}
.rate {
  display: inline;
  margin: 0 30px 0 10px;
}
.item {
  padding: 40px 10px;
}
.close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1em;
  cursor: pointer;
  color: #000;
}

.close-button:hover {
  color: red;
}

button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.container {
  display: flex;
  align-items: center;
  width: 730px;
}
.box {
  margin-left: 7px;
  display: flex;
  align-items: center;
}
svg-icon {
  margin-right: 5px;
}
body {
  font-family: "Arial", sans-serif;
}

a {
  color: #42b983; /* 一种更现代的蓝色 */
  text-decoration: none; /* 去掉下划线 */
}
a:hover {
  text-decoration: underline; /* 悬停时添加下划线 */
}
/* 优化列表样式 */

.no-markers li {
  list-style-type: none; /* 去掉列表标记 */
  padding: 0; /* 移除默认的内边距 */
  margin: 8% 0;
}
.floating-box {
  position: fixed; /* 固定定位 */
  top: 100px; /* 距离顶部80px的位置 */
  left: 71%; /* 距离右侧20px的位置 */
  width: 300px; /* 悬浮框的宽度 */
  height: 80%;
  background-color: #ffe6e698;
  border-radius: 8px; /* 圆角边框 */
  overflow: hidden; /* 隐藏溢出的内容 */
  border: 1px solid rgba(59, 84, 68, 0.053);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更深的阴影 */
  z-index: 1000; /* 确保悬浮框在其他内容之上 */
}
/* 优化悬浮框中的文字样式 */
.floating-box h3 {
  color: #f4f4f4;
  font-size: 30px;
  line-height: 100%;
  text-align: center;
  font-weight: bolder;
  background: #dd7373;
  padding: 30px 0;
  margin: 0;
  border-bottom: #f4f4f4 dashed 1px;
}
#footer {
  text-align: center;
  line-height: 100%;
  font-size: 20px;
  border-top: 2px solid #000; /* 添加一条黑色的横线 */
  padding: 20px 0;
  background: #c3feff;
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>